<template>
	<div class="alert-carousel">
		<div class="alert-mask" @click="cancel"></div>
		<div class="alert-body">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="标题">
		    		<el-input v-model="form.title" clearable></el-input>
				</el-form-item>
				<el-form-item label="图片">
					<ImgUpload @uploadSuccess="upload" :src="form.image" :type="url"></ImgUpload>
				</el-form-item>
				<el-form-item label="是否显示">
					<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
				</el-form-item>
				<div class="submit-btn">
					<el-button type="primary" @click="onSubmit" :loading="!ready">保存</el-button>
					<el-button @click="cancel">取消</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import ImgUpload from 'plugs/upload/upload'
	
	export default {
		props: {
			id: {
				type: Number,
				default: 0
			},
			url: {
				type: String,
				default: 'carousel'
			}
		},
		data() {
			return {
				form: new Object(),
				ready: false,
				type: ''
			}
		},
		created() {
			this.__getData()
            this.type = this.id != 0 ? '修改' : '创建'
		},
		methods: {
			cancel() {
				this.$emit('close')
			},
			upload(src) {
				this.form.image = src
			},
			onSubmit() {
				this.ready = false
				let url = this.url + (this.id != 0 ? '/' + this.id : '');
	        	let method = this.id != 0 ? 'patch' : 'post';
	        	this.$http[method](url, this.form).then((response) => {
					this.ready = true
					if(this.id == 0) {
						this.form = response.data
					}
					this.$emit('change', this.form)
					this.cancel()
	                this.$notify({
	                    title: '操作成功',
	                    message: '数据已' + this.type,
	                    type: 'success'
	                })
	        	})
			},
			__getData() {
				if(this.id == 0) {
					this.ready = true
					return false
				}
				this.$http.get(this.url+'/'+this.id+'/edit').then((response) => {
					this.form = response.data
					this.ready = true
				})
			}
		},
		components: {
			ImgUpload
		}
	}
</script>

<style scope>
	.alert-body {
		position: fixed;
		left: 50%;
		top: 15%;
		margin-left: -400px;
		z-index: 99;
		background: #fff;
		width: 800px;
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.alert-mask {
		position: fixed;
		left: 0;
		z-index: 98;
		top: 0;
		width: 100%;
		height: 100%;
		background: #000;
		filter:alpha(opacity=80);
	    opacity:0.80;
	    -moz-opacity:0.80;
	    -khtml-opacity: 0.80;
	}

	.alert-carousel .el-input {
		max-width: 98%;
	}

	.alert-carousel .el-form-item {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.alert-carousel .submit-btn {
		margin-top: 20px;
		text-align: center;
	}
</style>